<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="node_modules/border.css/border.css">
    <script src="node_modules/lib-flexible/flexible.js"></script>
</head>
<body>
<div class="container">
    <div class="container--item__header">
        <img src="img/Left%20.png" alt="#" class="container--img__left">
        <span class="container--item__information">消息(52)</span>
        <img src="img/brush.png" alt="#" class="container--img__brush">
        <img src="img/user.png" alt="#" class="container--img__user">
        <img src="img/plus%20.png" alt="#" class="container--img__plus">
    </div>
    <ul class="container--item__box">
        <li class="container--item__what">
            <span class="container--img__wallet">
                <img src="img/wallet.png" alt="#">
            </span>
            <span class="container--text__account">账户通知</span>
            <span class="container--text__time">2018/11/10</span>
            <span class="container--text__discounts">您有一张价值20元的超值优惠券今日到期...</span>
            <span class="container--text__det">删除</span>
        </li>
        <li class="container--item__what">
            <span class="container--img__wallet color">
                <img src="img/promotion.png" alt="#">
            </span>
            <span class="container--text__account">优惠促销</span>
            <span class="container--text__time">2018/11/09</span>
            <span class="container--text__discounts">
                <span>
                    合计73元
                    <img src="img/gift.png" alt="#" class="container--imt__gift">
                </span>
                <span>
                    全品类通用券
                    <img src="img/gift.png" alt="#" class="container--imt__gift">
                </span>
                <span>
                    免费领取,...
                </span>
            </span>
            <span class="container--text__det">删除</span>
        </li>
        <li class="container--item__front">
            <img src="img/time%20.png" alt="#" class="container--img__time">
            <span class="container--item__previous">两周前的消息</span>
        </li>
        <li class="container--item__what">
            <span class="container--img__wallet blue">
                <img src="img/inform.png" alt="#">
            </span>
            <span class="container--text__account">服务通知</span>
            <span class="container--text__time">2018/10/22</span>
            <span class="container--text__discounts">您购物车中的【飞利浦(PHILIPS)男士】...</span>
            <span class="container--text__det">删除</span>
        </li>
        <li class="container--item__what">
            <span class="container--img__wallet red">
                <img src="img/JD.png" alt="#">
            </span>
            <span class="container--text__account">京东客服 </span><span class="container--text__official">官方</span>
            <span class="container--text__time">2018/08/27</span>
            <span class="container--text__discounts">Hi~jd_4ff2e06769461,购好物上京东，...</span>
            <span class="container--text__det">删除</span>
        </li>
    </ul>
</div>
</body>
<script>
    let activeX, activeUlY, activeLiY;
    let li = document.getElementsByClassName('container--item__what');
    let remind = document.getElementsByClassName('container--item__front')[0];
    let ul = document.getElementsByClassName('container--item__box')[0];
    let detSpan = document.getElementsByClassName('container--text__det');
    ul.addEventListener("touchstart",function(e){
        let touch = e.targetTouches[0];
        activeUlY = touch.clientY
        for (let j = 0; j < li.length; j ++) {
            li[j].style.left = 0 + '%'
        }
    });
    ul.addEventListener('touchmove', function (e) {
        let touch = e.targetTouches[0];
        let moveY = touch.clientY - activeUlY;
        if (moveY > 100) {
            if (touch.clientY > touch.clientX) {
                ul.style.top = touch.clientY/5 + 'px'
            } else {
                ul.style.top = 0 + 'px'
            }
        }
    });
    ul.addEventListener('touchend', function () {
        ul.style.top = 0 + 'px'
    });
    for (let i = 0; i < li.length; i ++) {
        li[i].addEventListener("touchstart",touchstart);
        li[i].addEventListener("touchmove",touchmove);
        detSpan[i].onclick = function () {
            this.parentNode.removeEventListener('touchstart', touchstart);
            this.parentNode.removeEventListener('touchmove', touchmove);
            this.parentNode.parentNode.removeChild(this.parentNode);
            if (remind.nextElementSibling === null) {
                remind.remove()
            }
        }
    }
    function touchstart(e) {
        let touch = e.targetTouches[0];
        activeX = touch.clientX;
        activeLiY = touch.clientY
    }
    function touchmove(e) {
        let touch = e.targetTouches[0];
        let moveX = Math.abs(parseInt(touch.clientX - activeX));
        if (moveX > 100) {
            if (activeX > touch.clientX){
                for (let j = 0; j < li.length; j ++) {
                    li[j].style.left = 0 + '%'
                }
                this.style.left = -25 + '%'
            } else if (activeX < touch.clientX){
                this.style.left = 0 + '%'
            }
        }
    }
</script>
</html>
